import React, { useState, useEffect } from "react";
import "../static/css/ArticleList.css";
import { List, Row, Col, Modal, message, Button, Tooltip } from "antd";
import axios from "axios";
import { formatStamp, timesago } from "../filters/index"
import servicePath from "../config/apiUrl";
import '../static/css/MiQuanList.scss'
const { confirm } = Modal;

function ArticleList(props) {
  // const [articleId, setArticleId] = useState(0); // 文章的ID，如果是0说明是新增加，如果不是0，说明是修改
  const [loading, setLoading] = useState(false)
  const [listData, setList] = useState([])
  //得到文章列表
  const getList = () => {
    setLoading(true)
    axios({
      method: "get",
      url: servicePath.getMiQuanList,
      withCredentials: false,
      header: { "Access-Control-Allow-Origin": "*" }
    }).then(res => {
      console.log(res.data.list);
      setList(res.data.list);
      setLoading(false)
      
    }).catch((err)=>{
      message.error(err.response.data.data)
      if(err.response.status === 401){
        props.history.push("/login")
      }
      setLoading(false)
    })
  };
  //修改文章
  const updateMiquan = (id) => {
    props.history.push("/index/addMQuan/" + id)
  };
  useEffect(() => {
    getList();
  }, []);
  //删除密圈的方法
  const delMiquan = id => {
    confirm({
      title: "确定要删除这篇密圈吗?",
      content: "如果你点击OK按钮，文章将会永远被删除，无法恢复。",
      onOk() {
        axios(servicePath.delMiquan + id, { withCredentials: false }).then(
          res => {
            message.success("密圈删除成功");
            getList();
          }
        ).catch((err)=>{
          message.error(err.response.data.data)
          if(err.response.status === 401){
            props.history.push("/login")
          }
          setLoading(false)
        })
      },
      onCancel() {
        message.success("没有任何改变");
      }
    });
  };
  return (
    <div>
      <List
        loading={ loading }
        header={
          <Row className="list-div" style={{width:"100%"}}>
            <Col span={2}>
              <b>密圈名称</b>
            </Col>
            <Col span={3}>
              <b>密圈类别</b>
            </Col>
            <Col span={2}>
              <b>密圈博主</b>
            </Col>
            <Col span={2}>
              <b>博主平台</b>
            </Col>
            <Col span={3}>
              <b>密圈图片地址</b>
            </Col>
            <Col span={3}>
              <b>密圈跳转URL</b>
            </Col>
            <Col span={3}>
              <b>发布时间</b>
            </Col>

            <Col span={3}>
              <b>更新时间</b>
            </Col>
            <Col span={3}>
              <b>操作</b>
            </Col>
          </Row>
        }
        bordered
        dataSource={ listData }
        renderItem={item => (
          <List.Item>
            <Row className="list-div" style={{width:"100%"}}>
              <Col span={2}>{item.miQuanTitle}</Col>
              <Col span={3}>{item.miQuanType}</Col>
              <Col span={2}>{item.miQuanAuthor}</Col>
              <Col span={2}>{item.platform}</Col>
              <Col span={3}>
                {/* <Tooltip placement="left" title={`${item.miQuanImgurl?item.miQuanImgurl:'暂无'}`}> */}
                  {item.miQuanImgurl?item.miQuanImgurl:'-'}
                {/* </Tooltip> */}
              </Col>
              <Col span={3}>
                {/* <Tooltip placement="left" title={`${item.miQuanJumpurl?item.miQuanJumpurl:'暂无'}`}> */}
                  {item.miQuanJumpurl?item.miQuanJumpurl:'-'}
                {/* </Tooltip> */}
              </Col>
              <Col span={3}>{formatStamp(item.addTime)}</Col>
              <Col span={3}>{item.updateTime?timesago(item.updateTime):"未更新"}</Col>

              <Col span={3}>
                <Button type="link" onClick={()=> {
                  updateMiquan(item.id)
                }}>修改</Button>&nbsp;
                <Button
                  type="link"
                  danger
                  onClick={() => {
                    delMiquan(item.id);
                  }}
                >
                  删除{" "}
                </Button>
              </Col>
            </Row>
          </List.Item>
        )}
      />
    </div>
  );
}

export default ArticleList;
